<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { getRankingAPI } from '../../apis/novel';

const ranking = ref([])

const getRanking =  async () => {
  const res = await getRankingAPI()
  ranking.value = res.data
  document.title = '笔趣阁_小说排行榜'

}

onMounted(() => {
  getRanking()
})
</script>

<template>

  <div class="h-full min-h-screen">
    <div
      v-for="(item,key) in ranking"
      :key="key"
      class="pt-2"
    >
      <div class="w-full border-b shadow-sm border-gray-200 px-1 py-1.5 text-gray-800 tracking-wider bg-opacity-80 bg-gray-200">
        <span class="pl-1"> {{ key == '已经完本' ? '完本小说':key }}排行榜</span>
      </div>
      <div class="grid grid-cols-5 px-1">
        <div
          v-for="one in item"
          :key="one.id"
          class="px-1 pt-1 pb-0.5 mb-0.5 border-b border-gray-300 w-full nowrap"
        >
        <RouterLink :to="{path:'/book/'+one.id}">
          <span
          class="overflow-hidden text-xs text-blue-900 border-b cursor-pointer hover:border-b-red-500 hover:text-red-500">
            {{ one.name }}
          </span>
        </RouterLink>
          
          <span class="text-xs text-gray-400">/{{ one.author }}</span>
        </div>
      </div>

    </div>
  </div>

</template>

<style scoped lang='scss'>
.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>